<template>
    <el-row :span="24" class="col">
        <el-col :span="3" style="text-align: right;padding: 7px 10px;">驿站名字</el-col>
        <el-col :span="20"><el-input v-model="yizhan.courierStationName"></el-input></el-col>
    </el-row>
    <el-row :span="24" class="col" style="margin: 20px;">
        <el-col :span="3" style="text-align: right;padding: 7px 10px;">驿站图片</el-col>
        <el-col :span="20"><el-input v-model="yizhan.courierStationImage"></el-input></el-col>
    </el-row>
    <el-row :span="24" class="col" style="margin: 20px 0;">
        <el-col :span="3" style="text-align: right;padding: 7px 10px;">所属地区</el-col>
        <el-col :span="20">
            <el-row style="margin-bottom: 20px;">
                <el-col :span="24">
                    <el-cascader size="large" :options="options" v-model="selectedOptions" @change="handleChange" />
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24"><el-input v-model="yizhan.courierStationAddress"></el-input></el-col>
            </el-row>
        </el-col>
    </el-row>
    <el-row :span="24" class="col">
        <el-col :span="3" style="text-align: right;padding: 7px 10px;">所属小区</el-col>
        <el-col :span="20"><el-select v-model="value" placeholder="选择小区" style="width: 640px">
        <el-option
        v-for="item in xuanze"
        :key="item.value"
        :label="item.value"
        :value="item.communityId"
        />
    </el-select></el-col>
    </el-row>
    <el-row :span="24" class="col" style="margin: 20px 0;">
        <el-col :span="3" :offset="20">
            <el-button type="primary" @click="save">确认保存</el-button></el-col>
    </el-row>
</template>

<script setup>
import { ref, defineEmits,onMounted } from "vue";
import { regionData, codeToText } from "element-china-area-data";
import axios from "axios";

const value = ref('')

let xuanze = ref([]);

const options = ref(regionData);
let selectedOptions = ref([]);
// let weizhi = ref("");
    // let areaList = ref([]);
let res = null;
let yizhan =ref({
courierStationAddress: " ",
courierStationCity: "",
courierStationCommunityId:"",
courierStationDistrict: "",
courierStationImage: "",
courierStationName: "",
courierStationProvince: ""
})



const emits = defineEmits(["operate"]);

const handleChange = () => {
    
    yizhan.value.courierStationProvince = codeToText[selectedOptions.value[0]];
    yizhan.value.courierStationCity = codeToText[selectedOptions.value[1]];
    yizhan.value.courierStationDistrict = codeToText[selectedOptions.value[2]];
    // yizhan.value.formatted_address = yizhan.value.shopProvince + yizhan.value.shopCity + yizhan.value.shopDistrict;
    // console.log(yizhan.value);
    
}
const save = function () {
    emits("operate", {data:yizhan.value,name:"addCourierStation"});
}

onMounted(async function () {
    res = await axios.get("http://43.143.190.87:8091/panghudaojiaBackend/community/communityList?name=&startTime=&endTime=&pageNum=1&pageSize=9999&communityName=");
    console.log(res);
    xuanze.value = res.data.data.list.map(item => {
        item.value = item.communityName +"("+ item.communityProvince+item.communityCity+item.communityDistrict+item.communityAddress +")";
        return item;
    });
    console.log(xuanze.value);
    
})

// const getlocation = async function () {
//     console.log(mendian.value.formatted_address);
    
//     let res = await axios.get(`https://restapi.amap.com/v3/geocode/geo?key=457886b5972a97e93fb9cdccebfd450f&address=${mendian.value.formatted_address + mendian.value.shopAddress }`);
//     weizhi.value = res.data.geocodes[0].location;
//     if (res.data.geocodes[0].location) {
//         mendian.value.communityLatitude = res.data.geocodes[0].location.split(",")[0];
//         mendian.value.communityLongitude = res.data.geocodes[0].location.split(",")[1];
//     }

// }

// watchEffect(function(){
// })
</script>

<style lang="less" scoped></style>